<template>
	<el-drawer v-model="drawer" size="50%" title="字典数据" direction="rtl">
		<ContentTable padding="0px" v-bind="drawerTable" :data="tableData">
			<template #toolbar>
				<el-button type="primary" @click="handleAddClick">新 建</el-button>
			</template>
			<template #status="{ row }">
				<DictTag :options="sys_normal_status" :value="row.status" />
			</template>
			<template #handler="{ row }">
				<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
				<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button>
			</template>
		</ContentTable>

		<!-- 新建/编辑 字典项 -->
		<el-dialog v-model="dialogVisible" :title="title" width="400" :before-close="handleClose">
			<el-form ref="formRef" :model="formData" :rules="rulesData" label-width="90px">
				<el-form-item label="数据标签" prop="dictLabel">
					<el-input v-model="formData.dictLabel" placeholder="请输入数据标签" />
				</el-form-item>
				<el-form-item label="数据键值" prop="dictValue">
					<el-input v-model="formData.dictValue" placeholder="请输入数据键值" />
				</el-form-item>
				<el-form-item label="显示排序" prop="dictSort">
					<el-input-number v-model="formData.dictSort" :min="0" />
				</el-form-item>
				<el-form-item label="回显样式" prop="tagType">
					<el-select v-model="formData.tagType">
						<el-option
							v-for="item in tagTypeOptions"
							:key="item.value"
							:label="item.label + ' (' + item.value + ')'"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-switch v-model="formData.status" active-value="0" inactive-value="1" style="--el-switch-off-color: red" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" type="textarea" rows="3" maxlength="500" show-word-limit />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="submit">确 认</el-button>
				<el-button @click="handleClose">取 消</el-button>
			</template>
		</el-dialog>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, getCurrentInstance } from 'vue'
import ContentTable from '@/components/ContentTable'
import { selectDictData, insertDictData, updateDictData, deleteDictData } from '@/service/system/dict'
import { drawerTable, rulesData } from './config'
import DictTag from '@/components/DictTag'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
	dictType: {
		type: String,
		default: ''
	}
})

const { proxy } = getCurrentInstance() as any
const { sys_normal_status } = proxy.$useDict('sys_normal_status')

const drawer = ref(false)
const tableData = ref<any>([])

watch(drawer, async (newVal) => {
	if (newVal) {
		queryDictData()
	}
})

async function queryDictData() {
	tableData.value = await selectDictData(props.dictType)
}

const formData = ref<any>({ dictSort: 0, tagType: 'default', status: '0' })
const dialogVisible = ref(false)
const title = ref('')
const formRef = ref()
const tagTypeOptions = ref([
	{ value: 'default', label: '默认' },
	{ value: 'primary', label: '主要' },
	{ value: 'success', label: '成功' },
	{ value: 'info', label: '信息' },
	{ value: 'warning', label: '警告' },
	{ value: 'danger', label: '危险' }
])
const copyRowKeys = ['id', 'dictLabel', 'dictValue', 'dictSort', 'tagType', 'status', 'remark']

function handleAddClick() {
	title.value = '新建'
	dialogVisible.value = true
}
function handleEdit(row: any) {
	title.value = '编辑'
	for (const key of copyRowKeys) {
		formData.value[key] = row[key]
	}
	dialogVisible.value = true
}
function handleClose() {
	dialogVisible.value = false
	formData.value = { dictSort: 0, tagType: 'default', status: '0' }
	formRef.value.resetFields()
}
function handleDel(row: any) {
	ElMessageBox.confirm('确认删除此数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			await deleteDictData(row.id)
			ElMessage.success('删除成功')
			queryDictData()
		})
		.catch(() => {})
}
// 提交
function submit() {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			if (formData.value.id) {
				await updateDictData({ ...formData.value, dictType: props.dictType })
				ElMessage.success('更新成功')
				handleClose()
				queryDictData()
			} else {
				await insertDictData({ ...formData.value, dictType: props.dictType })
				ElMessage.success('新增成功')
				handleClose()
				queryDictData()
			}
		}
	})
}

defineExpose({ drawer })
</script>

<style scoped></style>
